import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import boardImage from '../assets/board.png';
import { currentPath, isDarkTheme } from '../app';

const Welcome = () => {
  const [darkMode, setDarkMode] = useState(isDarkTheme.value);

  useEffect(() => {
    // 监听主题变化
    const unsubscribe = isDarkTheme.subscribe((value) => {
      setDarkMode(value);
    });
    
    return () => unsubscribe();
  }, []);

  const handleStartClick = (e) => {
    e.preventDefault();
    // 更新当前路径状态
    currentPath.value = '/device-status';
    // 更新浏览器历史记录
    window.history.pushState({}, '', '/device-status');
    // 触发路由更新
    window.dispatchEvent(new PopStateEvent('popstate'));
  };

  return (
    <div className="min-h-screen overflow-hidden relative">
      {/* 背景装饰图案 - 充满整个页面 */}
      <div className="absolute inset-0 pointer-events-none" style={{ minHeight: '100vh' }}>
        {/* 几何线条装饰 - 全屏覆盖 */}
        <svg className="absolute top-0 left-0 w-full h-full opacity-20" viewBox="0 0 1920 2000" fill="none" preserveAspectRatio="xMidYMid slice">
          {/* 装饰线条 */}
          <defs>
            {/* 深色主题渐变 */}
            <linearGradient id="lineGradientDark" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="rgba(255, 255, 255, 0.15)" stopOpacity="1"/>
              <stop offset="50%" stopColor="rgba(255, 255, 255, 0.08)" stopOpacity="1"/>
              <stop offset="100%" stopColor="rgba(255, 255, 255, 0.03)" stopOpacity="1"/>
            </linearGradient>
            {/* 浅色主题渐变 */}
            <linearGradient id="lineGradientLight" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="rgba(0, 0, 0, 0.12)" stopOpacity="1"/>
              <stop offset="50%" stopColor="rgba(0, 0, 0, 0.06)" stopOpacity="1"/>
              <stop offset="100%" stopColor="rgba(0, 0, 0, 0.02)" stopOpacity="1"/>
            </linearGradient>
          </defs>
          
          {/* 全屏装饰性几何图形 */}
          {/* 左上角区域 - 主题响应 */}
          {darkMode ? (
            <>
              <circle cx="200" cy="200" r="100" fill="none" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="2"/>
              <circle cx="200" cy="200" r="150" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="1.5"/>
              <circle cx="200" cy="200" r="200" fill="none" stroke="rgba(255, 255, 255, 0.4)" strokeWidth="1"/>
            </>
          ) : (
            <>
              <circle cx="200" cy="200" r="100" fill="none" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="2"/>
              <circle cx="200" cy="200" r="150" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="1.5"/>
              <circle cx="200" cy="200" r="200" fill="none" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1"/>
            </>
          )}
          
          {/* 右上角区域 */}
          {darkMode ? (
            <>
              <rect x="1400" y="150" width="120" height="80" fill="none" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="1" rx="8"/>
              <rect x="1400" y="150" width="180" height="140" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5" rx="12"/>
              <rect x="1400" y="150" width="240" height="200" fill="none" stroke="rgba(255, 255, 255, 0.4)" strokeWidth="0.3" rx="16"/>
            </>
          ) : (
            <>
              <rect x="1400" y="150" width="120" height="80" fill="none" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="1" rx="8"/>
              <rect x="1400" y="150" width="180" height="140" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5" rx="12"/>
              <rect x="1400" y="150" width="240" height="200" fill="none" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="0.3" rx="16"/>
            </>
          )}
          
          {/* 左下角区域 */}
          {darkMode ? (
            <>
              <circle cx="300" cy="1200" r="80" fill="none" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="1"/>
              <circle cx="300" cy="1200" r="120" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5"/>
              <circle cx="300" cy="1200" r="160" fill="none" stroke="rgba(255, 255, 255, 0.4)" strokeWidth="0.3"/>
            </>
          ) : (
            <>
              <circle cx="300" cy="1200" r="80" fill="none" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="1"/>
              <circle cx="300" cy="1200" r="120" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5"/>
              <circle cx="300" cy="1200" r="160" fill="none" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="0.3"/>
            </>
          )}
          
          {/* 右下角区域 */}
          {darkMode ? (
            <>
              <rect x="1500" y="1100" width="100" height="60" fill="none" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="1" rx="6"/>
              <rect x="1500" y="1100" width="140" height="100" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5" rx="10"/>
              <rect x="1500" y="1100" width="180" height="140" fill="none" stroke="rgba(255, 255, 255, 0.4)" strokeWidth="0.3" rx="14"/>
            </>
          ) : (
            <>
              <rect x="1500" y="1100" width="100" height="60" fill="none" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="1" rx="6"/>
              <rect x="1500" y="1100" width="140" height="100" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5" rx="10"/>
              <rect x="1500" y="1100" width="180" height="140" fill="none" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="0.3" rx="14"/>
            </>
          )}
          
          {/* 底部中央区域 */}
          {darkMode ? (
            <>
              <circle cx="960" cy="1600" r="100" fill="none" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="1"/>
              <circle cx="960" cy="1600" r="150" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5"/>
              <circle cx="960" cy="1600" r="200" fill="none" stroke="rgba(255, 255, 255, 0.4)" strokeWidth="0.3"/>
            </>
          ) : (
            <>
              <circle cx="960" cy="1600" r="100" fill="none" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="1"/>
              <circle cx="960" cy="1600" r="150" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5"/>
              <circle cx="960" cy="1600" r="200" fill="none" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="0.3"/>
            </>
          )}
          
          {/* 底部左侧 */}
          {darkMode ? (
            <>
              <rect x="200" y="1400" width="120" height="80" fill="none" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="1" rx="8"/>
              <rect x="200" y="1400" width="160" height="120" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5" rx="12"/>
            </>
          ) : (
            <>
              <rect x="200" y="1400" width="120" height="80" fill="none" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="1" rx="8"/>
              <rect x="200" y="1400" width="160" height="120" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5" rx="12"/>
            </>
          )}
          
          {/* 底部右侧 */}
          {darkMode ? (
            <>
              <rect x="1600" y="1400" width="120" height="80" fill="none" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="1" rx="8"/>
              <rect x="1600" y="1400" width="160" height="120" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5" rx="12"/>
            </>
          ) : (
            <>
              <rect x="1600" y="1400" width="120" height="80" fill="none" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="1" rx="8"/>
              <rect x="1600" y="1400" width="160" height="120" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5" rx="12"/>
            </>
          )}
          
          {/* 中心区域装饰 */}
          {darkMode ? (
            <>
              <circle cx="960" cy="540" r="200" fill="none" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5"/>
              <circle cx="960" cy="540" r="300" fill="none" stroke="rgba(255, 255, 255, 0.4)" strokeWidth="0.3"/>
            </>
          ) : (
            <>
              <circle cx="960" cy="540" r="200" fill="none" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5"/>
              <circle cx="960" cy="540" r="300" fill="none" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="0.3"/>
            </>
          )}
          
          {/* 连接线网络 */}
          {darkMode ? (
            <>
              <path d="M 200 200 Q 500 300 800 250" stroke="rgba(255, 255, 255, 0.8)" strokeWidth="1" fill="none"/>
              <path d="M 200 200 Q 500 400 800 350" stroke="rgba(255, 255, 255, 0.6)" strokeWidth="0.5" fill="none"/>
              <path d="M 200 200 Q 500 500 800 450" stroke="rgba(255, 255, 255, 0.4)" strokeWidth="0.3" fill="none"/>
            </>
          ) : (
            <>
              <path d="M 200 200 Q 500 300 800 250" stroke="rgba(0, 0, 0, 0.8)" strokeWidth="1" fill="none"/>
              <path d="M 200 200 Q 500 400 800 350" stroke="rgba(0, 0, 0, 0.6)" strokeWidth="0.5" fill="none"/>
              <path d="M 200 200 Q 500 500 800 450" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="0.3" fill="none"/>
            </>
          )}
          
          <path d="M 1400 150 Q 1100 300 800 250" stroke={darkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"} strokeWidth="1" fill="none"/>
          <path d="M 1400 150 Q 1100 400 800 350" stroke={darkMode ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)"} strokeWidth="0.5" fill="none"/>
          <path d="M 1400 150 Q 1100 500 800 450" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          
          <path d="M 300 1200 Q 600 1000 900 1000" stroke={darkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"} strokeWidth="1" fill="none"/>
          <path d="M 300 1200 Q 600 800 900 800" stroke={darkMode ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)"} strokeWidth="0.5" fill="none"/>
          <path d="M 300 1200 Q 600 600 900 600" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          
          <path d="M 1500 1100 Q 1200 1000 900 1000" stroke={darkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"} strokeWidth="1" fill="none"/>
          <path d="M 1500 1100 Q 1200 800 900 800" stroke={darkMode ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)"} strokeWidth="0.5" fill="none"/>
          <path d="M 1500 1100 Q 1200 600 900 600" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          
          {/* 底部连接线 */}
          <path d="M 200 1400 Q 500 1300 800 1300" stroke={darkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"} strokeWidth="1" fill="none"/>
          <path d="M 200 1400 Q 500 1200 800 1200" stroke={darkMode ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)"} strokeWidth="0.5" fill="none"/>
          
          <path d="M 1600 1400 Q 1300 1300 1000 1300" stroke={darkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"} strokeWidth="1" fill="none"/>
          <path d="M 1600 1400 Q 1300 1200 1000 1200" stroke={darkMode ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)"} strokeWidth="0.5" fill="none"/>
          
          <path d="M 960 1600 Q 960 1400 960 1200" stroke={darkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"} strokeWidth="1" fill="none"/>
          <path d="M 960 1600 Q 960 1300 960 1000" stroke={darkMode ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)"} strokeWidth="0.5" fill="none"/>
          
          
          {/* 对角线装饰 - 全屏覆盖 */}
          <path d="M 0 200 L 1920 100" stroke={darkMode ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)"} strokeWidth="0.5" fill="none"/>
          <path d="M 0 400 L 1920 300" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          <path d="M 0 600 L 1920 500" stroke={darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"} strokeWidth="0.2" fill="none"/>
          <path d="M 0 800 L 1920 700" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          <path d="M 0 1000 L 1920 900" stroke={darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"} strokeWidth="0.2" fill="none"/>
          <path d="M 0 1200 L 1920 1100" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          <path d="M 0 1400 L 1920 1300" stroke={darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"} strokeWidth="0.2" fill="none"/>
          <path d="M 0 1600 L 1920 1500" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          <path d="M 0 1800 L 1920 1700" stroke={darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"} strokeWidth="0.2" fill="none"/>
          
          {/* 垂直装饰线 - 延伸到页面底部 */}
          <path d="M 200 0 L 150 2000" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          <path d="M 500 0 L 450 2000" stroke={darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"} strokeWidth="0.2" fill="none"/>
          <path d="M 800 0 L 750 2000" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          <path d="M 1100 0 L 1050 2000" stroke={darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"} strokeWidth="0.2" fill="none"/>
          <path d="M 1400 0 L 1350 2000" stroke={darkMode ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"} strokeWidth="0.3" fill="none"/>
          <path d="M 1700 0 L 1650 2000" stroke={darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"} strokeWidth="0.2" fill="none"/>
          
          {/* 对角线装饰 - 全屏覆盖 - 浅色主题 */}
          <path d="M 0 200 L 1920 100" stroke="url(#lineGradientLight)" strokeWidth="0.5" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 400 L 1920 300" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 600 L 1920 500" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 800 L 1920 700" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 1000 L 1920 900" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 1200 L 1920 1100" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 1400 L 1920 1300" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 1600 L 1920 1500" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" className="light:block dark:hidden"/>
          <path d="M 0 1800 L 1920 1700" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" className="light:block dark:hidden"/>
          
          {/* 垂直装饰线 - 延伸到页面底部 - 浅色主题 */}
          <path d="M 200 0 L 150 2000" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" className="light:block dark:hidden"/>
          <path d="M 500 0 L 450 2000" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" className="light:block dark:hidden"/>
          <path d="M 800 0 L 750 2000" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" className="light:block dark:hidden"/>
          <path d="M 1100 0 L 1050 2000" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" className="light:block dark:hidden"/>
          <path d="M 1400 0 L 1350 2000" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" className="light:block dark:hidden"/>
          <path d="M 1700 0 L 1650 2000" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" className="light:block dark:hidden"/>
          
          {/* 数学函数波形装饰 - 深色主题 */}
          {/* Sin波形 - 顶部 */}
          <path d="M 0 200 Q 320 150 640 200 T 1280 200 T 1920 200" stroke="url(#lineGradientDark)" strokeWidth="0.8" fill="none" opacity="0.6" className="dark:block light:hidden"/>
          <path d="M 0 250 Q 320 200 640 250 T 1280 250 T 1920 250" stroke="url(#lineGradientDark)" strokeWidth="0.4" fill="none" opacity="0.4" className="dark:block light:hidden"/>
          
          {/* Cos波形 - 中部 */}
          <path d="M 0 600 Q 320 550 640 600 T 1280 600 T 1920 600" stroke="url(#lineGradientDark)" strokeWidth="0.6" fill="none" opacity="0.5" className="dark:block light:hidden"/>
          <path d="M 0 650 Q 320 600 640 650 T 1280 650 T 1920 650" stroke="url(#lineGradientDark)" strokeWidth="0.3" fill="none" opacity="0.3" className="dark:block light:hidden"/>
          
          {/* Tan波形 - 底部 */}
          <path d="M 0 1000 Q 320 950 640 1000 T 1280 1000 T 1920 1000" stroke="url(#lineGradientDark)" strokeWidth="0.7" fill="none" opacity="0.6" className="dark:block light:hidden"/>
          <path d="M 0 1050 Q 320 1000 640 1050 T 1280 1050 T 1920 1050" stroke="url(#lineGradientDark)" strokeWidth="0.4" fill="none" opacity="0.4" className="dark:block light:hidden"/>
          
          {/* 复合波形 - 左侧 */}
          <path d="M 100 0 Q 100 200 100 400 Q 150 500 100 600 Q 100 800 100 1000 Q 150 1100 100 1200 Q 100 1400 100 1600 Q 100 1800 100 2000" stroke="url(#lineGradientDark)" strokeWidth="0.5" fill="none" opacity="0.4" className="dark:block light:hidden"/>
          
          {/* 复合波形 - 右侧 */}
          <path d="M 1820 0 Q 1820 200 1820 400 Q 1770 500 1820 600 Q 1820 800 1820 1000 Q 1770 1100 1820 1200 Q 1820 1400 1820 1600 Q 1820 1800 1820 2000" stroke="url(#lineGradientDark)" strokeWidth="0.5" fill="none" opacity="0.4" className="dark:block light:hidden"/>
          
          {/* 螺旋波形 - 中心区域 */}
          <path d="M 960 200 Q 1060 300 960 400 Q 860 500 960 600 Q 1060 700 960 800 Q 860 900 960 1000 Q 1060 1100 960 1200 Q 860 1300 960 1400 Q 1060 1500 960 1600 Q 860 1700 960 1800" stroke="url(#lineGradientDark)" strokeWidth="0.6" fill="none" opacity="0.5" className="dark:block light:hidden"/>
          
          {/* 阻尼振荡波形 */}
          <path d="M 0 300 Q 200 250 400 300 Q 600 350 800 300 Q 1000 250 1200 300 Q 1400 350 1600 300 Q 1800 250 1920 300" stroke="url(#lineGradientDark)" strokeWidth="0.4" fill="none" opacity="0.3" className="dark:block light:hidden"/>
          <path d="M 0 350 Q 200 300 400 350 Q 600 400 800 350 Q 1000 300 1200 350 Q 1400 400 1600 350 Q 1800 300 1920 350" stroke="url(#lineGradientDark)" strokeWidth="0.2" fill="none" opacity="0.2" className="dark:block light:hidden"/>
          
          {/* 方波波形 */}
          <path d="M 0 800 L 200 800 L 200 850 L 400 850 L 400 800 L 600 800 L 600 850 L 800 850 L 800 800 L 1000 800 L 1000 850 L 1200 850 L 1200 800 L 1400 800 L 1400 850 L 1600 850 L 1600 800 L 1800 800 L 1800 850 L 1920 850" stroke="url(#lineGradientDark)" strokeWidth="0.3" fill="none" opacity="0.3" className="dark:block light:hidden"/>
          
          {/* 锯齿波波形 */}
          <path d="M 0 1200 L 200 1300 L 400 1200 L 600 1300 L 800 1200 L 1000 1300 L 1200 1200 L 1400 1300 L 1600 1200 L 1800 1300 L 1920 1200" stroke="url(#lineGradientDark)" strokeWidth="0.4" fill="none" opacity="0.4" className="dark:block light:hidden"/>
          
          {/* 数学函数波形装饰 - 浅色主题 */}
          {/* Sin波形 - 顶部 */}
          <path d="M 0 200 Q 320 150 640 200 T 1280 200 T 1920 200" stroke="url(#lineGradientLight)" strokeWidth="0.8" fill="none" opacity="0.6" className="light:block dark:hidden"/>
          <path d="M 0 250 Q 320 200 640 250 T 1280 250 T 1920 250" stroke="url(#lineGradientLight)" strokeWidth="0.4" fill="none" opacity="0.4" className="light:block dark:hidden"/>
          
          {/* Cos波形 - 中部 */}
          <path d="M 0 600 Q 320 550 640 600 T 1280 600 T 1920 600" stroke="url(#lineGradientLight)" strokeWidth="0.6" fill="none" opacity="0.5" className="light:block dark:hidden"/>
          <path d="M 0 650 Q 320 600 640 650 T 1280 650 T 1920 650" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" opacity="0.3" className="light:block dark:hidden"/>
          
          {/* Tan波形 - 底部 */}
          <path d="M 0 1000 Q 320 950 640 1000 T 1280 1000 T 1920 1000" stroke="url(#lineGradientLight)" strokeWidth="0.7" fill="none" opacity="0.6" className="light:block dark:hidden"/>
          <path d="M 0 1050 Q 320 1000 640 1050 T 1280 1050 T 1920 1050" stroke="url(#lineGradientLight)" strokeWidth="0.4" fill="none" opacity="0.4" className="light:block dark:hidden"/>
          
          {/* 复合波形 - 左侧 */}
          <path d="M 100 0 Q 100 200 100 400 Q 150 500 100 600 Q 100 800 100 1000 Q 150 1100 100 1200 Q 100 1400 100 1600 Q 100 1800 100 2000" stroke="url(#lineGradientLight)" strokeWidth="0.5" fill="none" opacity="0.4" className="light:block dark:hidden"/>
          
          {/* 复合波形 - 右侧 */}
          <path d="M 1820 0 Q 1820 200 1820 400 Q 1770 500 1820 600 Q 1820 800 1820 1000 Q 1770 1100 1820 1200 Q 1820 1400 1820 1600 Q 1820 1800 1820 2000" stroke="url(#lineGradientLight)" strokeWidth="0.5" fill="none" opacity="0.4" className="light:block dark:hidden"/>
          
          {/* 螺旋波形 - 中心区域 */}
          <path d="M 960 200 Q 1060 300 960 400 Q 860 500 960 600 Q 1060 700 960 800 Q 860 900 960 1000 Q 1060 1100 960 1200 Q 860 1300 960 1400 Q 1060 1500 960 1600 Q 860 1700 960 1800" stroke="url(#lineGradientLight)" strokeWidth="0.6" fill="none" opacity="0.5" className="light:block dark:hidden"/>
          
          {/* 阻尼振荡波形 */}
          <path d="M 0 300 Q 200 250 400 300 Q 600 350 800 300 Q 1000 250 1200 300 Q 1400 350 1600 300 Q 1800 250 1920 300" stroke="url(#lineGradientLight)" strokeWidth="0.4" fill="none" opacity="0.3" className="light:block dark:hidden"/>
          <path d="M 0 350 Q 200 300 400 350 Q 600 400 800 350 Q 1000 300 1200 350 Q 1400 400 1600 350 Q 1800 300 1920 350" stroke="url(#lineGradientLight)" strokeWidth="0.2" fill="none" opacity="0.2" className="light:block dark:hidden"/>
          
          {/* 方波波形 */}
          <path d="M 0 800 L 200 800 L 200 850 L 400 850 L 400 800 L 600 800 L 600 850 L 800 850 L 800 800 L 1000 800 L 1000 850 L 1200 850 L 1200 800 L 1400 800 L 1400 850 L 1600 850 L 1600 800 L 1800 800 L 1800 850 L 1920 850" stroke="url(#lineGradientLight)" strokeWidth="0.3" fill="none" opacity="0.3" className="light:block dark:hidden"/>
          
          {/* 锯齿波波形 */}
          <path d="M 0 1200 L 200 1300 L 400 1200 L 600 1300 L 800 1200 L 1000 1300 L 1200 1200 L 1400 1300 L 1600 1200 L 1800 1300 L 1920 1200" stroke="url(#lineGradientLight)" strokeWidth="0.4" fill="none" opacity="0.4" className="light:block dark:hidden"/>
        </svg>
        
        {/* 全屏浮动装饰元素 - 带动画效果 */}
        {/* 左上角 */}
        <div className="absolute top-20 right-20 w-32 h-32 opacity-30 animate-pulse" style={{ animationDuration: '3s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <circle cx="50" cy="50" r="40" stroke="currentColor" strokeWidth="1">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="20s" repeatCount="indefinite"/>
            </circle>
            <circle cx="50" cy="50" r="25" stroke="currentColor" strokeWidth="0.5">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="15s" repeatCount="indefinite"/>
            </circle>
            <circle cx="50" cy="50" r="10" fill="currentColor">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="10s" repeatCount="indefinite"/>
            </circle>
          </svg>
        </div>
        
        {/* 右上角 */}
        <div className="absolute top-32 right-1/4 w-24 h-24 opacity-25 animate-bounce" style={{ animationDuration: '4s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <rect x="20" y="20" width="60" height="60" stroke="currentColor" strokeWidth="1" rx="8"/>
            <rect x="30" y="30" width="40" height="40" stroke="currentColor" strokeWidth="0.5" rx="4"/>
            <rect x="40" y="40" width="20" height="20" fill="currentColor" rx="2"/>
          </svg>
        </div>
        
        {/* 左下角 */}
        <div className="absolute bottom-32 left-16 w-24 h-24 opacity-25 animate-bounce" style={{ animationDuration: '4s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <rect x="20" y="20" width="60" height="60" stroke="currentColor" strokeWidth="1" rx="8"/>
            <rect x="30" y="30" width="40" height="40" stroke="currentColor" strokeWidth="0.5" rx="4"/>
            <rect x="40" y="40" width="20" height="20" fill="currentColor" rx="2"/>
          </svg>
        </div>
        
        {/* 右下角 */}
        <div className="absolute bottom-20 right-20 w-28 h-28 opacity-20 animate-pulse" style={{ animationDuration: '2s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <polygon points="50,10 80,80 20,80" stroke="currentColor" strokeWidth="1">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="25s" repeatCount="indefinite"/>
            </polygon>
            <polygon points="50,25 65,70 35,70" stroke="currentColor" strokeWidth="0.5">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="20s" repeatCount="indefinite"/>
            </polygon>
          </svg>
        </div>
        
        {/* 中心区域 */}
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 opacity-15 animate-pulse" style={{ animationDuration: '6s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <path d="M50 10 L90 50 L50 90 L10 50 Z" stroke="currentColor" strokeWidth="1" fill="none">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="30s" repeatCount="indefinite"/>
            </path>
            <path d="M50 25 L75 50 L50 75 L25 50 Z" stroke="currentColor" strokeWidth="0.5" fill="none">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="25s" repeatCount="indefinite"/>
            </path>
          </svg>
        </div>
        
        {/* 左侧中间 */}
        <div className="absolute top-1/3 left-1/4 w-16 h-16 opacity-20 animate-bounce" style={{ animationDuration: '5s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <circle cx="50" cy="30" r="15" stroke="currentColor" strokeWidth="1"/>
            <circle cx="50" cy="70" r="15" stroke="currentColor" strokeWidth="1"/>
            <line x1="50" y1="45" x2="50" y2="55" stroke="currentColor" strokeWidth="1"/>
          </svg>
        </div>
        
        {/* 右侧中间 */}
        <div className="absolute top-1/4 right-1/3 w-18 h-18 opacity-18 animate-pulse" style={{ animationDuration: '7s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <circle cx="50" cy="50" r="30" stroke="currentColor" strokeWidth="1">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="18s" repeatCount="indefinite"/>
            </circle>
            <circle cx="50" cy="50" r="15" fill="currentColor">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="12s" repeatCount="indefinite"/>
            </circle>
          </svg>
        </div>
        
        {/* 底部中间 */}
        <div className="absolute bottom-1/4 left-1/2 transform -translate-x-1/2 w-14 h-14 opacity-22 animate-bounce" style={{ animationDuration: '3s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <rect x="25" y="25" width="50" height="50" stroke="currentColor" strokeWidth="1" rx="8">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="22s" repeatCount="indefinite"/>
            </rect>
            <rect x="35" y="35" width="30" height="30" fill="currentColor" rx="4">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="16s" repeatCount="indefinite"/>
            </rect>
          </svg>
        </div>
        
        {/* 顶部中间 */}
        <div className="absolute top-1/6 left-1/2 transform -translate-x-1/2 w-12 h-12 opacity-25 animate-pulse" style={{ animationDuration: '4s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <polygon points="50,20 70,60 30,60" stroke="currentColor" strokeWidth="1" fill="none">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="28s" repeatCount="indefinite"/>
            </polygon>
            <polygon points="50,35 60,55 40,55" fill="currentColor">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="20s" repeatCount="indefinite"/>
            </polygon>
          </svg>
        </div>
        
        {/* 底部区域装饰元素 */}
        <div className="absolute bottom-1/6 left-1/4 w-16 h-16 opacity-20 animate-bounce" style={{ animationDuration: '6s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <circle cx="50" cy="50" r="35" stroke="currentColor" strokeWidth="1">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="24s" repeatCount="indefinite"/>
            </circle>
            <circle cx="50" cy="50" r="20" fill="currentColor">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="18s" repeatCount="indefinite"/>
            </circle>
          </svg>
        </div>
        
        <div className="absolute bottom-1/8 right-1/4 w-14 h-14 opacity-18 animate-pulse" style={{ animationDuration: '5s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <rect x="25" y="25" width="50" height="50" stroke="currentColor" strokeWidth="1" rx="8">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="26s" repeatCount="indefinite"/>
            </rect>
            <rect x="35" y="35" width="30" height="30" fill="currentColor" rx="4">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="20s" repeatCount="indefinite"/>
            </rect>
          </svg>
        </div>
        
        <div className="absolute bottom-1/12 left-1/2 transform -translate-x-1/2 w-10 h-10 opacity-22 animate-bounce" style={{ animationDuration: '4s' }}>
          <svg viewBox="0 0 100 100" fill="none" className="w-full h-full" style={{ color: 'var(--adonis-accent)' }}>
            <polygon points="50,15 75,75 25,75" stroke="currentColor" strokeWidth="1" fill="none">
              <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="30s" repeatCount="indefinite"/>
            </polygon>
            <polygon points="50,30 65,65 35,65" fill="currentColor">
              <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="22s" repeatCount="indefinite"/>
            </polygon>
          </svg>
        </div>
      </div>
      
      {/* 主要内容区域 */}
      <div className="h-full overflow-y-auto relative z-10">
        <div className="container mx-auto px-6 py-6">
          <div className="flex justify-between items-center mb-8">
            <div className="relative">
              <div className="text-xs font-medium mb-1 tracking-wide" style={{ color: 'var(--adonis-accent)' }}>Embedded real-time control system</div>
              <h1 className="flex items-center">
                <div className="w-1 h-6 mr-3" style={{ background: 'var(--adonis-accent)' }}></div>
                <span className="text-2xl font-['Orbitron'] font-bold">HPM5E-EC-DEV</span>
                <span className="ml-2 text-lg font-normal" style={{ color: 'var(--adonis-text-muted)' }}>控制面板</span>
              </h1>
              <div className="mt-2 h-0.5 w-24" style={{ background: 'var(--adonis-accent)' }}></div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* 设备概览卡片 */}
            <div className="adonis-card p-6 border flex flex-col" style={{ 
              borderColor: 'var(--adonis-border)', 
              background: 'rgba(255, 255, 255, 0.05)',
              backdropFilter: 'blur(10px)',
              WebkitBackdropFilter: 'blur(10px)'
            }}>
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold flex items-center adonis-section-title">
                  <svg className="w-5 h-5 mr-2" style={{ color: 'var(--adonis-accent)' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                  </svg>
                  设备概览
                </h2>
              </div>
              
              <div className="relative aspect-video mb-4 overflow-hidden rounded-lg" style={{ 
                background: 'rgba(0, 0, 0, 0.1)',
                backdropFilter: 'blur(10px)',
                WebkitBackdropFilter: 'blur(10px)',
                border: '1px solid var(--adonis-border)',
                boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.1)',
                position: 'relative'
              }}>
                <img 
                  src={boardImage} 
                  alt="HPM5E-EC-DEV开发板" 
                  className="w-full h-full object-contain hover:scale-105 transition-transform duration-300"
                  style={{ 
                    filter: 'brightness(1.1) contrast(1.05)',
                    mixBlendMode: 'normal',
                    opacity: 0.95,
                    position: 'relative',
                    zIndex: 1
                  }}
                />
              </div>

              <p className="text-sm leading-relaxed mb-4" style={{ color: 'var(--adonis-text-muted)' }}>
              基于 HPM5E31IPB1 开发板，EtherCAT入门评估的轻量化开发板。
              </p>

              {/* 弹性空间 - 弹簧控件 */}
              <div className="flex-grow"></div>

              {/* 技术标签 */}
              <div className="mb-4">
                <div className="flex flex-wrap gap-2">
                  {['HPM5E00', 'EtherCAT', 'Gigabit Ethernet', 'USB OTG', 'UART', 'LCD', 'DS18B20', 'CAN', 'GPIO'].map((interfaceType, index) => (
                    <span 
                      key={index}
                      className="px-2 py-1 text-xs rounded-md"
                      style={{ 
                        background: 'rgba(138,180,255,0.1)',
                        color: 'var(--adonis-accent)',
                        border: '1px solid rgba(138,180,255,0.2)'
                      }}
                    >
                      {interfaceType}
                    </span>
                  ))}
                </div>
              </div>

              {/* 弹性空间 - 弹簧控件 */}
              <div className="flex-grow"></div>

              <div className="grid grid-cols-2 gap-4">
                <button 
                  onClick={handleStartClick}
                  className="adonis-btn adonis-btn-primary flex items-center justify-center gap-2"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  开始使用
                </button>
                <a 
                  href="https://hpm-sdk-zh.readthedocs.io/" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="adonis-btn flex items-center justify-center gap-2"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                  </svg>
                  先楫官方文档
                </a>
              </div>
            </div>

            {/* 功能特性卡片 */}
            <div className="grid grid-rows-2 gap-6">
              <div className="adonis-card p-6 border" style={{ 
                borderColor: 'var(--adonis-border)', 
                background: 'rgba(255, 255, 255, 0.05)',
                backdropFilter: 'blur(10px)',
                WebkitBackdropFilter: 'blur(10px)'
              }}>
                <h2 className="text-lg font-semibold mb-4 flex items-center adonis-section-title">
                  <svg className="w-5 h-5 mr-2" style={{ color: 'var(--adonis-accent)' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  MCU特点
                </h2>
                <div className="grid grid-cols-2 gap-4">
                  {[
                    { name: '高性能RISC-V', desc: '480MHz主频，2712 CoreMark' },
                    { name: 'EtherCAT从站', desc: '支持3端口P0 ~ P2' },
                    { name: '丰富存储', desc: '1MB Flash + 256KB SRAM' },
                    { name: '多通讯接口', desc: 'USB HS/CAN/UART/SPI/I2C' },                    
                    { name: '增强PWM', desc: '2×8通道，100ps精度' },
                    { name: '高精度ADC', desc: '2×2MSPS 16位ADC' }
                  ].map((feature, index) => (
                    <div key={index} className="flex items-start space-x-3">
                      <div className="mt-1 p-1 rounded-md" style={{ background: 'rgba(138,180,255,0.12)', color: 'var(--adonis-accent)' }}>
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium">{feature.name}</div>
                        <div className="text-sm" style={{ color: 'var(--adonis-text-muted)' }}>{feature.desc}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="adonis-card p-6 border" style={{ 
                borderColor: 'var(--adonis-border)', 
                background: 'rgba(255, 255, 255, 0.05)',
                backdropFilter: 'blur(10px)',
                WebkitBackdropFilter: 'blur(10px)'
              }}>
                <h2 className="text-lg font-semibold mb-4 flex items-center adonis-section-title">
                  <svg className="w-5 h-5 mr-2" style={{ color: 'var(--adonis-accent)' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                  应用场景
                </h2>
                <div className="grid grid-cols-2 gap-4">
                  {[
                    { 
                      icon: '🏭', 
                      title: '工业自动化', 
                      desc: 'EtherCAT实时通信，多轴运动控制',
                      color: '#3B82F6'
                    },
                    { 
                      icon: '⚙️', 
                      title: '运动控制系统', 
                      desc: '高精度PWM控制，伺服驱动',
                      color: '#10B981'
                    },
                    { 
                      icon: '🤖', 
                      title: '机器人控制', 
                      desc: '多关节协调，实时轨迹规划',
                      color: '#F59E0B'
                    },
                    { 
                      icon: '🔬', 
                      title: '量测设备', 
                      desc: '高精度ADC采样，数据采集分析',
                      color: '#8B5CF6'
                    },
                    { 
                      icon: '🔧', 
                      title: '伺服驱动器', 
                      desc: '高精度位置控制，速度调节',
                      color: '#EF4444'
                    },
                    { 
                      icon: '⚡', 
                      title: '实时控制系统', 
                      desc: '微秒级响应，确定性执行',
                      color: '#06B6D4'
                    }
                  ].map((scene, index) => (
                    <div key={index} className="flex items-start space-x-3 p-3 rounded-lg" style={{ 
                      background: 'rgba(255, 255, 255, 0.02)',
                      border: '1px solid var(--adonis-border)'
                    }}>
                      <div className="text-xl">{scene.icon}</div>
                      <div className="flex-1">
                        <div className="font-medium mb-1 text-sm" style={{ color: 'var(--adonis-text)' }}>
                          {scene.title}
                        </div>
                        <div className="text-xs" style={{ color: 'var(--adonis-text-muted)' }}>
                          {scene.desc}
                        </div>
                      </div>
                      <div 
                        className="w-2 h-2 rounded-full mt-1" 
                        style={{ background: scene.color }}
                      ></div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Welcome; 